<template>
  <div>
    <h1>element plus</h1>
    <el-icon size="50" color="#ff0000">
      <Edit />
    </el-icon>
     <el-icon size="50" color="#ff00ff">
      <Comment />
    </el-icon>
     <el-tree-select
        ref="mytreeRef"
        v-model="treeVal"
        :data="treedata"
        :render-after-expand="false"
        style="width: 240px"
      />
      <el-button @click="tochange">打印值</el-button>
  </div>
</template>
<script lang="ts" setup>
    import {Edit,Comment} from '@element-plus/icons-vue'


  // elementplus 和elementui 区别
  // 1. elementui 是基于vue2的
  // 2. elementplus 是基于vue3的
  // elementplus 完全支持ts写法 提供很多type 类型
  // elementplus 完全图标库 变成组合式api 导入使用
  import {ref} from 'vue'
  let treeVal=ref<string|number>()//收集树选择后的值
  let treedata=ref([
    {label:"第一层",value:"1-1",
      children:[
        {label:"第一层-1",value:"1-1-1",
          children:[
            {label:"第一层-1-1",value:"1-1-1-1"},
            {label:"第一层-1-2",value:"1-1-1-2"},
          ]
        },
        {label:"第一层-2",value:"1-1-2"}
    ]}
  ])//属性选择器的数据

 let tochange=()=>{
   console.log(treeVal.value)
   
 }
</script>